<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>
<body>
     <div id="app">
       
        <ul>
          <!-- 从父组件传值到子组件 -->
          <!-- 静态属性-->
           <!-- <school school-name="清华北大"> </school> -->
           <!-- 动态属性:认为里面是变量  -->
          <!-- <school :school-name="'上海浙大'"></school> -->
          <!-- 动态属性 -->
          <!-- <school :school-name="schoolList[0]"></school>  -->
          <!-- 循环传值组件 -->
          <school v-for="(item,index) in schoolList" :school-name="item" :index="index" :key="index"  v-on:cschool='changeEvent'></school>

        </ul>
        <h2 style="color:red">选中学校:{{chooseSchool}}</h2>

     </div>

     <script>
        // 产品组件
        Vue.component('school',{
            props:['schoolName','index'],  //props告知schoolName是父元素传过来的
            template:`
            <li> 
            <h3>序号：{{index}}---学校名称:{{schoolName}}</h3>
            <button @click="chooseEvent(schoolName)">选择学校</button>
            </li>
            `,
           
           methods:{
               chooseEvent:function(schoolName){
                   console.log(schoolName);
                //    想要将子元素的数据传递给父元素，需要自定义触发事件，实现数据传值
                // console.log(this);
                // 触发一个事件名称叫cShool的事件
                this.$emit('cschool',schoolName);
               }
           }
        })

         var vm = new Vue({
            //  根组件
             el:'#app',
             data:{
                    schoolList:['安阳师范学院','安阳工学院','河南护理学院'],
                    chooseSchool:''
             },
             methods:{
                changeEvent:function(data){
                    console.log('触发选择事件');
                   this.chooseSchool=data;
                }
             }
         })
     </script>
</body>
</html>